import React from 'react';
import { Link } from 'react-router-dom';
import ReactDOM from 'react-dom';
import { Form, Icon, Input, Button, Alert } from 'antd';
import { Layout } from 'antd';
import { register } from '../api/getData';
import 'antd/dist/antd.css';
require('../../css/login/login.css');
const { Header, Footer, Content } = Layout;

class NormalLoginForm extends React.Component {
    constructor() {
        super();
        this.state = {
            msg: ''
        };
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Layout>
                <Header>注册页</Header>
                <Content>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: '请输入你的用户名!' }],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="请输入用户名"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入你的密码!' }],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="请输入密码"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit" className="login-form-button" onClick={this.cregister}>
                                注册账号
                        </Button>
                            <Link to="/login">已有账号，去登录</Link>
                            <Link to="/home">返回首页</Link>
                        </Form.Item>
                    </Form>
                    <div id="alert">

                    </div>
                </Content>
                <Footer></Footer>
            </Layout>
        );
    }
    cregister = () => {
        const { form } = this.props;
        form.validateFields((err, fieldsValue) => {
            if (err) return;
            const { username, password } = fieldsValue;
            const params = {
                username,
                password
            }
            register(params).then(res => {
                if (res.data.status === 200) {
                    this.setState({
                        msg: res.data.msg
                    }, () => {
                        ReactDOM.render(
                            <div>
                                <Alert
                                    message={this.state.msg}
                                    description="注册成功，去登陆"
                                    type="success"
                                    showIcon
                                />
                            </div>,
                            document.getElementById('alert')
                        )
                        setTimeout(() => {
                            this.props.history.push('/login')
                        }, 2000)
                    })
                }
                else {
                    this.setState({
                        msg: res.data.msg
                    }, () => {
                        ReactDOM.render(
                            <div>
                                <Alert
                                    message={this.state.msg}
                                    description="注册失败，检查输入的信息是否正确或用户名全为空"
                                    type="error"
                                    showIcon
                                />
                            </div>,
                            document.getElementById('alert')
                        )
                    })
                }
            }).catch(err => {
                console.log(err)
            })
        });
    }
}
const registerContainer = Form.create({ name: 'normal_login' })(NormalLoginForm);
export default registerContainer;